<template>
    <div id="login">
        <div class="login_box" v-if="giftCode==''">
            <img src="../../assets/logo.png">            
        </div>
        <div v-else>
            <yd-cell-group>
                <div class="goodsInfo_li" v-if="orderGoodsList && orderGoodsList.length>0" @click="showDetail">
                    <div class="goodsInfo_img">
                        <img v-if="orderGoodsList.length == 1" :src='imgUrl+orderGoodsList[0].goodsImage'>
                        <img v-else src="../../assets/giftBox.png">
                    </div>
                    <div class="goodsInfo_list">
                        <div class="goodsInfo_title">关爱礼盒</div>
                        <br>
                        <div class="goodsInfo_title">
                            {{orderGoodsList[0].goodsName}}
                            <span v-if="orderGoodsList.length>1">、{{orderGoodsList[1].goodsName}}</span>
                            <span v-if="orderGoodsList.length>2"> ......</span>
                        </div>
                    </div>
                </div>
                <div class="goodsInfo_li" v-else>
                     <div class="goodsInfo_img">
                        <img src="../../assets/giftBox.png">
                    </div>
                    <div class="goodsInfo_list">
                        <div class="goodsInfo_title" style="color:red">该礼品已被领取</div>
                    </div>
                </div>
            </yd-cell-group>
            <yd-cell-group v-show="showInfo == '1'">
                <div class="goodsInfo_li" v-for="(item,index) in orderGoodsList" :key='index'>
                    <div class="goodsInfo_img">
                        <img :src='imgUrl+item.goodsImage'>
                    </div>
                    <div class="goodsInfo_list">
                        <div class="goodsInfo_title">{{item.goodsName}} </div>
                        <br>
                        <div class="goodsInfo_conter">规格：{{item.goodsSpec | oGoodsSpec}} 
                            <span style="color:red;float:right;margin-right:15px"> X {{item.goodsNum}}</span>
                        </div>
                    </div>
                </div>
            </yd-cell-group>
        </div>
        <br>
        <yd-cell-group>
            <yd-cell-item>
                <span slot="left">手机号：</span>
                <yd-input slot="right" required :show-required-icon='false' v-model="phone" ref="phoneName" regex="mobile" placeholder="请输入手机号码"></yd-input>
            </yd-cell-item>
            <yd-cell-item>
                <span slot="left">验证码：</span>
                <input type="text" slot="right" maxlength="6" v-model="code" placeholder="请输入验证码">
                <!-- ↓↓关键代码是这里↓↓ -->
                <yd-sendcode slot="right" init-str='获取短信验证码' v-model="start" @click.native="sendCode" type="danger" run-str="{%s}S"></yd-sendcode>
                <!-- ↑↑关键代码是这里↑↑ -->
            </yd-cell-item>
        </yd-cell-group>
        <div class="login_btn">
            <!-- <yd-button size="large" @click.native="login" bgcolor="#ef4f4f" color="#FFF">登录</yd-button> -->
            <yd-button size="large" @click.native="login" bgcolor="#ef4f4f" color="#FFF">
                <span v-if="giftCode==''">登录</span>  <!-- 登录时的场合 -->
                <span v-else>下一步</span>            <!-- 二维码送礼时的场合 -->
            </yd-button>
        </div>
        <!-- 登录时的场合 -->
        <div class="login_bottom" v-show="giftCode==''">
            <yd-flexbox>
                <yd-flexbox-item style="text-align:center">点击登录即表示同意
                    <b @click="agreement">《员工关爱平台服务条款》</b>
                </yd-flexbox-item>
            </yd-flexbox>
        </div>
        <div class="login_bottom" v-show="giftCode==''">
            <yd-flexbox>
                <yd-flexbox-item style="text-align:left">
                    <b @click="nameLogin" style="font-size:0.3rem;color:#3333CC">账号密码登录</b>
                </yd-flexbox-item>
                <yd-flexbox-item style="text-align:right">
                    <b @click="register" style="font-size:0.3rem;color:#000000">立即注册</b>
                </yd-flexbox-item>
            </yd-flexbox>
        </div>
    </div>
</template>

<script>

export default {
    name: 'fastLogin',
    data() {
        return {
            phone: '',
            code: '',
            start: false,
            giftCode: '',
            imgUrl: this.CONSTANT.imgBaseUrl,
            cartChannelLength: 0,
            orderGoodsList: [],
            showInfo: '0',  //###### 1显示详情 0不显示
            beforePage: ''
        }
    },
    filters: {
        oGoodsSpec(goodsSpec) {
            if (goodsSpec == 'N;') {
                return "默认";
            }
            return goodsSpec;
        }
    },
    created: function() {
        this.$dialog.loading.close();
        if (this.$route.query.giftCode) {
            this.giftCode = this.$route.query.giftCode;
            this.$store.commit('giftCode', this.giftCode);
            this.getGoodsInfo(this.giftCode);
            window.document.title = "领取礼品";
        } else {
            this.$store.commit('giftCode', '');
            // 迁移源是 winegg
            if (this.$route.query.page) {
                this.beforePage = this.$route.query.page;
            }

            window.document.title = "央联关爱平台";
        }
    },
    methods: {        
        getGoodsInfo(result) {
            this.$dialog.loading.open('请稍后');
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'gift/checkGiftCode?giftCode=' + result)
                .then((response) => {
                    this.$dialog.loading.close();
                    if (response.status == 200) {
                        if (response.data.status == 1) {
                            this.orderGoodsList = response.data.object;
                            for (var i = 0; i < response.data.object.length; i++) {
                                this.cartChannelLength += response.data.object[i].goodsNum;
                            }
                        }
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                });
        },
        showDetail() {
            if (this.showInfo == "0") {
                this.showInfo = "1";
            } else {
                this.showInfo = "0";
            }
        },
        login() {
            let phoneName = this.$refs.phoneName;
            if (!phoneName.valid) {
                let toastMsg = phoneName.errorMsg;
                // errorCode => NOT_NULL(不能为空)、NOT_MIN_SIZE(输入字符位数不足)、NOT_REGEX_RULE(不符合规则)
                if (phoneName.errorCode == "NOT_NULL") {
                    toastMsg = "手机号"+toastMsg;
                } else {
                    toastMsg = "请输入正确的手机号";
                }
                this.$dialog.toast({
                    mes: toastMsg,
                    timeout: 1500
                });
                return false;
            }
            if (this.code == '') {
                this.$dialog.toast({
                    mes: '验证码不可为空',
                    timeout: 1500
                });
                return false;
            }
            this.$dialog.loading.open('正在登录');
            this.$axios.post(this.CONSTANT.wapiBaseUrl + 'member/login?mobile=' + this.phone + '&code=' + this.code)
                .then((response) => {
                    this.$dialog.loading.close();
                    if (response.status == 200) {
                        if (response.data.msg == 'SUCCESS') {
                            // _setCustomVar:用于发送为访客打自定义标记的请求，用来统计会员访客、登录访客、不同来源访客的浏览数据。
                            //  _czc.push(["_setCustomVar",name,value,time]);
                            //   name: (必填) 自定义访客种类，用来描述观察访客的角度，如“会员级别”、“访客来源”等等。
                            //  value: (必填) 自定义访客值，表示对访客类型的具体描述，如"VIP1"、"VIP2"等等。
                            //  time: (选填) 有效时长，表示本自定义访客标记的生效时长。
                            //       (不填或填“1”表示长期有效。 填“0”表示仅在发包页面有效。 填“2”表示仅在本访次有效。
                            //       填具体数值，表示生效时长，单位“秒”。)
                            _czc.push(["_setCustomVar","是否登录","已登录",7200]);
                            this.$store.commit('userid', response.data.object.memberId);
                            this.$store.commit('token', response.data.object.token); 
                            //下面注释  往生产放记得打开注释  4行
                            // 退出微信再重新登录时，openId = 空
                            if (!this.$store.state.openId) {
                                this.$router.push('/author?mobPhone=' + this.phone);
                            } else {
                                // userid超时，openId没有超时
                                if (this.$store.state.giftCode != '') {
                                    this.$router.replace('/receiveGifts?mobPhone=' + this.phone);
                                } else {
                                    if (window.history.length > 1) {
                                        this.$router.go(-1);
                                    } else {
                                        // 权限拦截跳转时（砸金蛋页面、打卡签到页面）
                                        if (this.beforePage != '') {
                                            // this.beforePage == 'winegg'、'signIn'、'appointment'
                                            this.$router.replace('/' + this.beforePage);
                                        } else {
                                            // 防止首页返回到其他页面
                                            this.$router.replace('/');
                                        }  
                                    }                             
                                }
                            }
                        } else {
                            this.$dialog.toast({
                                mes: response.data.msg,
                                timeout: 1500
                            });
                        }
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                    this.$dialog.toast({
                        mes: '登录失败，请稍后重试',
                        icon: 'error',
                        timeout: 1500
                    });
                });
        },
        sendCode() {
            let phoneName = this.$refs.phoneName;
            if (!phoneName.valid) {
                let toastMsg = phoneName.errorMsg;
                // errorCode => NOT_NULL(不能为空)、NOT_MIN_SIZE(输入字符位数不足)、NOT_REGEX_RULE(不符合规则)
                if (phoneName.errorCode == "NOT_NULL") {
                    toastMsg = "手机号"+toastMsg;
                } else {
                    toastMsg = "请输入正确的手机号";
                }
                this.$dialog.toast({
                    mes: toastMsg,
                    timeout: 1500
                });
                return false;
            }
            this.start = true;
            this.$dialog.loading.open('发送中...');
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'member/sendCode?channel=' + this.phone + '&type=0')
                .then((response) => {
                    if (response.status == 200) {
                        this.$dialog.loading.close();
                        if (response.data.msg == 'SUCCESS') {
                            this.$dialog.toast({
                                mes: '发送成功',
                                icon: 'success',
                                timeout: 1500
                            });
                        } else {
                            this.$dialog.toast({
                                mes: '发送失败，请联系客服',
                                icon: 'error',
                                timeout: 1500
                            });
                        }
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                    this.$dialog.toast({
                        mes: '请求错误，请稍后重试',
                        icon: 'error',
                        timeout: 1500
                    });
                });
        },
        //账号密码登陆
        nameLogin() {
            this.$router.replace('/login');
        },
        //注册
        register() {
            this.$router.replace('/register');
        },
        agreement() {
            this.$router.push('/agreement');
        }
    }
}
</script>

<style scoped>
#login {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
}

.login_box {
    width: 100%;
    height: auto;
    overflow: hidden;
}
.login_box img {
    display: block;
    height: 2.6rem;
    margin: 0.1rem auto;
}

.login_btn {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.24rem;
}

.login_bottom {
    width: 100%;
    box-sizing: border-box;
    line-height: 0.8rem;
    font-size: 0.24rem;
    color: #A1A1A1;
    padding: 0.1rem 0.24rem;
}
.login_bottom b {
    font-weight: 400;
    color: #ef4f4f;
}

.yd-cell-right .yd-btn {
    position: absolute;
    right: 0.24rem;
    top: 0.18rem;
}

.goodsInfo_li {
    width: 100%;
    height: 2rem;
    padding-top: 5px;
    padding-bottom: 5px;
    overflow: hidden;
    border-bottom: 1px solid #BBBBBB;
}
.goodsInfo_li:last-of-type {
    border-bottom: 0;
}
.goodsInfo_li .goodsInfo_img {
    float: left;
    padding-left: 0.2rem;
    width: 1.8rem;
    height: 100%;
    overflow: hidden;
}
.goodsInfo_img img {
    width: 100%;
    height: auto;
    min-height: 100%;
}

.goodsInfo_list {
    /* float: left; */
    /* width: calc(100% - 2.5rem); */
    padding-left: 0.2rem;
    height: 100%;
    box-sizing: border-box;
    padding-top: 0.3rem;
    overflow: hidden;
}
.goodsInfo_list .goodsInfo_title {
    color: #333;
    font-size: 16px;
    overflow: hidden;
    height: 0.4rem;
    line-height: 0.4rem;
}
</style>